<?  $sess = new Zend_Session_Namespace(CLU_NS);?>
<div class="box white_bg">

<script type="text/javascript">
$(function() {
    $("table#roleList tr:nth-child(odd)").addClass("striped");
});


// Edit Role Name 
$(function() {
    $("a[name^=role-name-edit]").click(function(e){
        id = this.name.split('-')[3];
        $("#role-name-form-" + id).toggle(); 
        return false; 
    });
    
    //the role name text box KeyPress event
    $("input[id^=role-name-text]").bind('keypress', function(e) {
        if (e.keyCode == 13) { //Enter
            //trigger the submit button
            $("#role-name-submit-" + id).click();
            return false;
        } 
    });
    
    //submit the new role name
    $("input[id^=role-name-submit]").click(function(e){
        newRoleName = $("#role-name-text-" + id).val();
        $.getJSON("/<?=$sess->viewLang?>/user/ajax/update-role-name", {'id': id, 'name': newRoleName},
            function(json) {
                if (json.success)
                {
                    $("#role-name-" + id).html(json.name);
                    $("#role-name-form-" + id).hide();
                }
                else
                    $("#role-name-error-" + id).show().html("Could not insert to DB");
            });
        return false;
    });

    //delete-role link
    //TODO  click(curry(remove, "user"))
    $("a[name^=role-delete]").click(function(e){
         id = this.name.split('-')[2];
         $.getJSON("/<?=$sess->viewLang?>/user/ajax/delete-role", {'id': id},
            function(json) {
               if (json.success)
                    $("#role-row-" + id).css("background-color", 'red').fadeOut(2000); //2 seconds
               else
                   $("#delete-error-" + id).show().html(json.message);
            });
         return false;
    });
    
    $("#bulkForm").submit(function(e){
        
    });
    
});
</script>


<script type="text/javascript">

$(function() {
    $("tr").mouseover(function(e){
                        jQuery(this).find(".tr-action").show();
                }).mouseout(function(){
                        jQuery(this).find(".tr-action").hide();
                });
});
</script>

<h1> User Roles List</h1>

<form action="/<?=$sess->viewLang?>/user/role/bulk" method="POST" id="bulkForm">

<table id="roleList">
<tr style="background-color:#EEEEEE">
    <td>
    </td>
    <td>
    <b>ID</b>
    </td>
    <td>
    <b>Role name</b>
    </td>
    <td>
    <b>Permissions</b>
    </td>
</tr>
<?foreach ($this->viewParams['roleList'] as $role) :?>
  <tr id="role-row-<?=$role['rid'] ?>">
    <td width="3%">
    <input type="checkbox" value="<?=$role['rid'] ?>" id="edit-roles-<?=$role['rid'] ?>" name="roles[<?=$role['rid'] ?>]"
    />
    </td>
    <td width="2%"><?=$role['rid'] ?></td>
    <td width="20%"> 
        <span id="role-name-<?=$role['rid']?>" name="<?=$role['rid']?>"><?= $role['rname']?></span>
        <span id="role-name-error-<?=$role['rid']?>" style='font-size:10px;color:red'></span>
        <a href="javascript:void()" class="tr-action" name="role-name-edit-<?=$role['rid']?>" style="display:none">edit</a>
            <div id="role-name-form-<?=$role['rid']?>" style="display:none">
                <input type='text' id='role-name-text-<?=$role['rid']?>' value="<?= $role['rname']?>"/> <br/>
                <input type='button' value='Go' id='role-name-submit-<?=$role['rid']?>'/>
            </div>  
    </td>
    <td width="75%">
     <?=$role['perm']?>
     <div style="height:30px;width:400px; padding: 2px 0 0;">
        <div align = "right" class = "tr-action" style="display:none">
        <a href="/<?=$sess->viewLang?>/user/role/assign-perm?rid=<?=$role['rid']?>&rname=<?=$role['rname']?>">edit perms</a>
        <a href="javascript:void() " name="role-delete-<?=$role['rid']?>">delete</a>
        <span id="delete-error-<?=$role['rid']?>"></span>
        </div>
    </div>
    </td>
  </tr>
<?endforeach?>

</table>
<br/>
<div  style="background-color:#EEEEEE">
Bulk Operation: 
<select name='bulkaction'>
<option value='delete'> delete </option>
<option value='disable'> disable </option>
</select>
<input type="submit" value="Apply" id="bulkSubmit" name="op"/>
</div>
</form>

</div>